<template>
	<div class="huatixiangqing">
		<div class="fanhui" @click="fanhuishang">
			<i class="el-icon-arrow-left"></i>
			<span>话题详情页</span>
		</div>
		
		<div class="huatitou">
			<div class="huatitou1">
				<div class="huatitou1_1">
					<img src="../../assets/img/hauti1.png" />
				</div>
				<div class="huatitou1_2">
					<p>
						<span>啥都不挺就挺你</span>
						<span v-if="shoucangshu==0" @click="yicang">
							<i class="el-icon-star-off"></i>收藏
						</span>
						<span v-if="shoucangshu==1" @click="yicang">
							<i class="el-icon-star-on"></i>已收藏
						</span>
					</p>
					<p>
						<span>发起时间：</span>
						<span>2020年10月</span>
					</p>
					<p class="jianjie">
						<span>简&emsp;&emsp;介：</span>
						<span>模拟考试老地方猫哭老鼠多麻烦离开谁都没了开始的模拟考试老地方猫哭老鼠多麻烦离开谁都没了开始的模拟考试老地方猫哭老鼠多麻烦离开谁都没了开始的</span>
						<span v-if="zhan">展开<i class="el-icon-arrow-down"></i></span>
						<span v-if="!zhan">收起<i class="el-icon-arrow-up"></i></span>
					</p>
				</div>
			</div>
			<div class="huatitou2">
				<table cellpadding="0" cellspacing="0">
					<tr>
						<th>参与人数</th>
						<th>播放量</th>
					</tr>
					<tr>
						<td>
							{{shu | guolv}}
						</td>
						<td>
							{{shu | guolv}}
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<div class="faqiren">
			<div class="faqiren1">
				<div class="shouye_tou1">
					<span>发起人</span>
				</div>
				<div class="shouye_tou2">
					<span>参与的头部达人</span>
					<span>（448）</span>
				</div>
				<div class="shouye_tou3">
					<span>更多<i class="el-icon-arrow-right"></i></span>
				</div>
			</div>
			<div class="faqiren2">
				<div class="faqiren2_1">
					<div class="maomi1">
						<img src="../../assets/img/datou.png" />
					</div>
					<div class="maomi2">
						<p>天猫</p>
						<p>粉丝：{{shu | guolv}}</p>
					</div>
				</div>
				<div class="tianmi">
					<div class="faqiren2_2" v-for="(item,index) in 4" :key="index">
						<div class="maomi1">
							<img src="../../assets/img/datou.png" />
						</div>
						<div class="maomi2">
							<p>大狼狗郑建鹏&言真夫妇</p>
							<p>粉丝：{{shu | guolv}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="shipinbiaoxian1">
			<div class="waicengqu">
				<div class="shouye_tou2">
					<span>数据趋势<i class="el-icon-question"></i></span>
				</div>
				<div class="bianhua">
					<div class="bianhua1">
						<ul>
							<li>播放量</li>
							<li>参与人数</li>
						</ul>
					</div>
					<div class="bianhua2">
						<ul>
							<li>增量</li>
							<li>总量</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div id="c2"></div>
			<h3 class="beizhu1">
				注：如趋势出现负值，表明有部分用户删除了话题下视频
			</h3>
		</div>
		
		<div class="shujuqushi">
			<div class="shujuqushi1">
				<span>数据趋势<i class="el-icon-question"></i></span>
			</div>
			
			<div class="shujuqushi2">
				<div class="shujuqushi2_1" v-for="(item,index) in 5" :key="index">
					<div class="zuihou1">
						<img src="../../assets/img/huati2.png" />
						<div>
							<span>
								<i :class="{'el-icon-star-off':!gaibian,'el-icon-star-on':gaibian}"></i>收藏
							</span>
						</div>
					</div>
					<div class="zuihou2">
						<p>啥都不挺就挺你。#我的日常 我.....欠他一次啥都不挺就挺你。#我的日常 我.....欠他一次</p>
						<p>
							<img src="../../assets/img/laoluo.png" />
							<span>额国铁蛋（东北第一帅）</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Chart } from '@antv/g2';
	export default{
		name:"huatixiangqing",
		data(){
			return{
				zhan:true,
				shu:4534133,
				tudata1:[
					  { month: '10-03', city: '粉丝', temperature: -2000 },
					  { month: '10-04', city: '粉丝', temperature: -3000 },
					  { month: '10-05', city: '粉丝', temperature: 1000 },
					  { month: '10-06', city: '粉丝', temperature: 15562 },
					  { month: '10-07', city: '粉丝', temperature: 26 },
					  { month: '10-08', city: '粉丝', temperature: 3452 },
					  { month: '10-09', city: '粉丝', temperature: 2541 },
					  { month: '10-10', city: '粉丝', temperature: 20553 },
					  { month: '10-11', city: '粉丝', temperature: 19767 },
					  { month: '10-12', city: '粉丝', temperature: 2456 },
					  { month: '10-13', city: '粉丝', temperature: 8657 },
					  { month: '10-14', city: '粉丝', temperature: 14562 },
					  { month: '10-15', city: '粉丝', temperature: 7456 },
					  { month: '10-16', city: '粉丝', temperature: 9678 },
					  { month: '10-17', city: '粉丝', temperature: -3000 },
					  { month: '10-18', city: '粉丝', temperature: 2346 },
					  { month: '10-19', city: '粉丝', temperature: 20186 },
					  { month: '10-20', city: '粉丝', temperature: 3456 },
					  { month: '10-21', city: '粉丝', temperature: 16956 },
					  { month: '10-22', city: '粉丝', temperature: 19999 },
					  { month: '10-23', city: '粉丝', temperature:  18888},
					  { month: '10-24', city: '粉丝', temperature: 2 },
					  { month: '10-25', city: '粉丝', temperature: 20545 },
					  { month: '10-26', city: '粉丝', temperature: 1234 },
				],
				shoucangshu:0,
				cangshu:0,
				
				gaibian:false
			}
		},
		mounted(){
			var _self=this;
			_self.tuZonggao=document.body.offsetWidth*0.3;
			console.log(_self.tuZonggao)
			
			$(window).resize(()=>{
				_self.tuZonggao=document.body.offsetWidth*0.2;
			})
			
			_self.tubiao1();
			//展开和收起
			$(".jianjie span:nth-of-type(2)").addClass("shenlue");
			
			$(".jianjie span:nth-of-type(3)").click(function(){
				if(_self.zhan==true){
					_self.zhan=false;
					$(this).siblings("span:nth-of-type(2)").removeClass("shenlue");
				}else{
					_self.zhan=true;
					$(this).siblings("span:nth-of-type(2)").addClass("shenlue");
				}
			})
			
			$(".bianhua1 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
			
			$(".bianhua2 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			yicang(){
				if(this.cangshu==1){
					this.shoucangshu=0;
					this.cangshu=0;
					this.$message({
					  message: '已取消收藏！',
					  type: 'warning'
					});
				}else{
					this.shoucangshu=1;
					this.cangshu=1;
					this.$message({
					  message: '收藏成功！',
					  type: 'success'
					});
				}
			},
			
			fanhuishang(){
				this.$router.go(-1);
			},
			tubiao1(){
				const chart = new Chart({
				  container: 'c2',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata1);
				chart.scale('temperature',{
				  ticks:[-3000,0,3000,6000,9000,12000,15000,18000,21000]
				});
				
				chart.tooltip({
				  showCrosshairs: true,
				  shared: true,
				});
				
				chart.axis('temperature', {
				  label: {
				    formatter: (val) => {
				      return val + ' ';
				    },
				  },
				});
				
				chart.legend({
					position:'top'
				});
				
				chart
				  .line()
				  .position('month*temperature')
				  .color('city')
				  .label('temperature')
				  .shape('smooth');
				
				chart
				  .point()
				  .position('month*temperature')
				  .color('city')
				  .shape('circle')
				  .style({
				    stroke: '#fff',
				    lineWidth: 1,
				  });
				
				chart.render();
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.huatixiangqing{
		
		.fanhui{
			cursor: pointer;
			color: #666666;
			font-size: 0.5rem;
			display: flex;
			align-items: center;
			text-decoration: none;
			i{
				margin-right:0.2rem ;
				font-size: 0.7rem;
			}
		}
		.fanhui:hover{
			color: #0091FF;
		}
		
		.huatitou{
			display: flex;
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 0.6rem;
			margin-top:1rem ;
			
			.huatitou1{
				flex: 1;
				display: flex;
				
				.huatitou1_1{
					img{
						width: 3rem;
						height: 3rem;
					}
				}
				.huatitou1_2{
					margin-left:0.4rem ;
					color: #999999;
					font-size: 0.4rem;
					p:nth-of-type(1){
						span:nth-of-type(1){
							color: #333333;
							font-size: 0.5rem;
						}
						span:nth-of-type(2){
							color: #0091FF;
							font-size: 0.35rem;
							text-align: center;
							padding: 0.05rem 0.2rem;
							border:1px solid #F1F4FB ;
							border-radius:0.1rem ;
							cursor: pointer;
							margin-left:0.4rem ;
							i{
								font-size: 0.4rem;
								margin-right:0.2rem ;
							}
						}
						span:nth-of-type(2):hover{
							background-color: #0091FF;
							color: #fff;
						}
					}
					p:nth-of-type(2){
						margin: 0.6rem 0;
					}
					.jianjie{
						span:nth-of-type(1){
							float: left;
						}
						span:nth-of-type(2){
							float: left;
							width: 10rem;
							letter-spacing: 0.05rem;
							line-height: 0.7rem;
						}
						.shenlue{
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						span:nth-of-type(3){
							float: left;
							margin-left:0.4rem ;
							color: #0091FF;
							cursor: pointer;
							
							i{
								margin-left:0.3rem ;
							}
						}
					}
				}
			}
			.huatitou2{
				flex: 1;
				
				table{
					float: right;
					width: 30%;
					th{
						color: #999999;
						font-size: 0.4rem;
						padding: 0.3rem 0;
						font-weight: normal;
					}
					td{
						font-size: 0.4rem;
						padding: 0.2rem 0;
						text-align: center;
					}
					td:nth-of-type(1){
						color: #F6564A;
					}
					td:nth-of-type(2){
						color: #0091FF;
					}
				}
				table::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		}
		
		.faqiren{
			padding: 0.6rem;
			background-color: #fff;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.faqiren1{
				
				.shouye_tou1{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					
					span{
						font-size: 0.45rem;
						display: block;
						margin-left:0.8rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0rem;
						left: 0;
						width: 0.2rem;
						height: 0.6rem;
						background-color: #1890FF;
					}
				}
				.shouye_tou2{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					margin-left:4rem ;
					display: flex;
					align-items: center;
					
					span:nth-of-type(1){
						font-size: 0.45rem;
						display: block;
						margin-left:0.6rem ;
					}
					
					span:nth-of-type(1)::before{
						content: "";
						display: block;
						position: absolute;
						top: 0rem;
						left: 0;
						width: 0.2rem;
						height: 0.6rem;
						background-color: #1890FF;
					}
					span:nth-of-type(2){
						color: #D4D4D4;
						font-size: 0.4rem;
					}
				}
				.shouye_tou3{
					cursor: pointer;
					float: right;
					color: #0091FF;
					font-size: 0.45rem;
					i{
						margin-left:0.2rem ;
					}
				}
			}
			.faqiren1::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.faqiren2{
				margin: 0.8rem 0 0 0;
				
				.faqiren2_1{
					display: flex;
					float: left;
					
					.maomi1{
						img{
							width: 1.5rem;
							height: 1.5rem;
							border-radius:50% ;
						}
					}
					.maomi2{
						margin-left:0.3rem ;
						color: #333333;
						font-size: 0.4rem;
						
						p:nth-of-type(2){
							color: #999;
							margin-top:0.4rem ;
						}
					}
				}
				.tianmi{
					float: left;
					display: flex;
					flex-wrap: wrap;
					
					.faqiren2_2{
						display: flex;
						margin-left:2rem ;
						
						.maomi1{
							img{
								width: 1.5rem;
								height: 1.5rem;
								border-radius:50% ;
							}
						}
						.maomi2{
							margin-left:0.3rem ;
							color: #333333;
							font-size: 0.4rem;
							
							p:nth-of-type(1){
								width: 4rem;
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							
							p:nth-of-type(2){
								color: #999;
								margin-top:0.4rem ;
							}
						}
					}
				}
			}
			.faqiren2::after{
				content: "";
				display: block;
				clear: both;
			}
		}
		
		.shipinbiaoxian1{
			background-color: #fff;
			padding: 0.6rem 0.6rem;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.waicengqu{
				margin-bottom:0.8rem ;
				.shouye_tou2{
					height: 100%;
					float: left;
					box-sizing: border-box;
					position: relative;
					margin-bottom:0.8rem ;
					
					span{
						font-weight: 600;
						font-size: 0.4rem;
						display: inline-block;
						margin-left:0.8rem ;
						margin-top:0.8rem ;
						color: #333333;
						
						i{
							margin-left:0.2rem ;
						}
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.8rem;
						left: 0;
						width: 0.2rem;
						height: 0.6rem;
						background-color: #1890FF;
					}
				}
				.bianhua{
					float: right;
					display: flex;
					align-items: center;
					padding-top:0.6rem ;
					
					.bianhua1{
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.bianhua2{
						margin-left:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
							
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			.waicengqu::after{
				content: "";
				display: block;
				clear: both;
			}
			.beizhu1{
				color: #999999;
				font-weight: normal;
				font-size: 0.35rem;
				text-align: center;
				padding: 0.8rem 0;
				letter-spacing: 0.03rem;
			}
		}
	
		.shujuqushi{
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 0.6rem;
			.shujuqushi1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				
				span:nth-of-type(1){
					font-size: 0.45rem;
					display: block;
					margin-left:0.6rem ;
					color: #333333;
					
					i{
						margin-left:0.2rem ;
					}
				}
				
				span:nth-of-type(1)::before{
					content: "";
					display: block;
					position: absolute;
					top: 0rem;
					left: 0;
					width: 0.2rem;
					height: 0.6rem;
					background-color: #1890FF;
				}
				span:nth-of-type(2){
					color: #D4D4D4;
					font-size: 0.4rem;
				}
			}
			
			.shujuqushi2{
				display: flex;
				flex-wrap: wrap;
				
				.shujuqushi2_1{
					width: 46%;
					display: flex;
					margin: 0.8rem 0;
					margin-right:1.5rem ;
					
					.zuihou1{
						position: relative;
						img{
							width: 6rem;
							height: 3rem;
						}
							
						span{
							position: absolute;
							bottom: 0.5rem;
							right: 0.2rem;
							cursor: pointer;
							// width: 1.5rem;
							color: #fff;
							background-color: #0091FF;
							text-align: center;
							border-radius:0.05rem ;
							display: block;
							font-size: 0.3rem;
							padding: 0.1rem 0.3rem;
							i{
								margin-right:0.2rem ;
							}
						}
					}
					.zuihou2{
						margin-left:0.6rem ;
						p:nth-of-type(1){
							color: #333333;
							font-size: 0.45rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						p:nth-of-type(2){
							display: flex;
							align-items: center;
							margin-top:1.3rem ;
							img{
								width: 0.7rem;
								height: 0.7rem;
								border-radius:50% ;
							}
							span{
								color: #333333;
								font-size: 0.45rem;
								margin-left:0.3rem ;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
	}
</style>
